<script setup>
	const tabs = [{
			name: '校园墙',
			imgUrl: '/static/shouye/tab6.svg',
			navigator: '/otherpages/schoolWall/index/index'
		}, {
			name: '拼车',
			imgUrl: '/static/shouye/tab8.svg',
			navigator: '/subpkg/taxi/index/index'
		},
		{
			name: '外卖',
			imgUrl: '/static/shouye/tab4.svg',
			navigator: '/otherpages/schoolWall/index/index'
		},
		{
			name: '兼职',
			imgUrl: '/static/shouye/tab3.svg',
			navigator: '/otherpages/job/index/index'
		}, {
			name: '兴趣',
			imgUrl: '/static/shouye/tab5.svg',
			navigator: '/otherpages/hobby/index/index'
		}, {
			name: '帮忙',
			imgUrl: '/static/shouye/tab1.svg',
			navigator: '/otherpages/help/index/index'
		}, {
			name: '物品交易',
			imgUrl: '/static/shouye/tab7.svg',
			navigator: '/otherpages/exchange/exchange'
		},
		{
			name: '工具',
			imgUrl: '/static/shouye/tab2.svg',
			navigator: '/otherpages/schoolWall/index/index'
		},
	]

	const naviPage = (item) => {
		// console.log(item);
		if (item.name == '外卖' || item.name == '工具') {
			uni.showToast({
				title: '该功能暂未开放',
				icon: 'none'
			})
		} else {
			uni.navigateTo({
				url: item.navigator
			})
		}
	}
</script>
<template>
	<view class="flex-col page">
		<view class="flex-col">
			<MyHeader title="信息服务平台" :hidden="true"></MyHeader>
			<view class="flex-col justify-start items-center image-wrapper_2">
				<image class="image_7"
					src="https://ide.code.fun/api/image?token=676816fbdefdb10011103b99&name=f3ba4e47d05881b1ec3d5c9811f51ffb.png" />
			</view>
			<view class="grid">
				<block v-for="(item,index) in tabs" :key="index">
					<view class="flex-col items-center relative grid-item" @click="naviPage(item)">
						<image class="image_8" :src="item.imgUrl" />
						<text class="mt-8 font text">{{item.name}}</text>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>



<style scoped lang="scss">
	.ml-5 {
		margin-left: 10rpx;
	}

	.ml-11 {
		margin-left: 22rpx;
	}

	.mt-7 {
		margin-top: 14rpx;
	}

	.mt-260 {
		margin-top: 520rpx;
	}

	.ml-101 {
		margin-left: 202rpx;
	}

	.page {
		background-color: #f7f8fa;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.section {
		padding: 36rpx 12rpx 42rpx 34rpx;
		background-image: linear-gradient(180deg, #4c8eef 0%, #84bbd900 100%);
	}

	.group {
		padding: 0 16rpx;
	}

	.image {
		width: 34rpx;
		height: 22rpx;
	}

	.image_2 {
		width: 30rpx;
		height: 22rpx;
	}

	.image_3 {
		width: 48rpx;
		height: 22.66rpx;
	}

	.image_4 {
		width: 18rpx;
		height: 34rpx;
	}

	.section_2 {
		padding: 12rpx 24rpx;
		background-color: #ffffff99;
		border-radius: 50rpx;
		height: 64rpx;
		border-left: solid 1rpx #97979733;
		border-right: solid 1rpx #97979733;
		border-top: solid 1rpx #97979733;
		border-bottom: solid 1rpx #97979733;
	}

	.image-wrapper {
		width: 38rpx;
	}

	.image_6 {
		width: 38rpx;
		height: 14rpx;
	}

	.section_3 {
		background-color: #33333333;
		width: 1rpx;
		height: 37rpx;
	}

	.image_5 {
		width: 34rpx;
		height: 34rpx;
	}

	.image-wrapper_2 {
		margin: 0 24rpx;
		padding: 310rpx 0 20rpx;
		border-radius: 16rpx;
		background-image: url('https://bs-mini-program.oss-cn-hangzhou.aliyuncs.com/images/0/%E5%9B%BE%E7%89%87/1.jpg');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.image_7 {
		width: 46rpx;
		height: 10rpx;
	}

	.grid {
		margin: 28rpx 24rpx 0;
		padding: 0 8rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		height: 370rpx;
		display: grid;
		grid-template-rows: repeat(2, minmax(0, 1fr));
		grid-template-columns: repeat(4, minmax(0, 1fr));
		row-gap: 0;
		column-gap: 0;
	}

	.grid-item {
		padding: 20rpx 0 28rpx;
	}

	.image_8 {
		width: 96rpx;
		height: 96rpx;
	}

	.font {
		font-size: 28rpx;
		font-family: SourceHanSansCN;
		line-height: 25.74rpx;
		color: #333333;
	}

	.text {
		line-height: 25.96rpx;
	}

	.image_9 {
		border-radius: 50%;
		width: 96rpx;
		height: 96rpx;
	}

	.text_2 {
		line-height: 26.02rpx;
	}

	.text_3 {
		line-height: 25.82rpx;
	}

	.text_4 {
		line-height: 25.84rpx;
	}

	.text_5 {
		line-height: 26.16rpx;
	}

	.text_6 {
		line-height: 24.44rpx;
	}

	.section_4 {
		padding: 6rpx 0;
		filter: drop-shadow(0rpx -4rpx 8rpx #a1727214);
		background-color: #ffffff;
	}

	.equal-division-item {
		width: 48rpx;
		height: 48rpx;
	}
</style>